<template>
	<view class="container">
		<view class="title fw fz18 tac">权证处理流程</view>

<!--    <u-steps current="3" v-for="item,index in list" :key="index"  dot>-->
<!--      <u-steps-item :title="item" :desc="process.causeOfFailure">-->
<!--      </u-steps-item>-->
<!--    </u-steps>-->


    <u-steps :current="current"  direction="column">
      <u-steps-item  v-for="(item,index) in list" :title="item" :desc="process.causeOfFailure && index+1==current ?process.causeOfFailure:''">
      </u-steps-item>

    </u-steps>

<!--		<view class="list">-->
<!--			<view class="listBar" v-for="item,index in list" :key="index">-->
<!--				<view class="disp cic">-->
<!--					<view :class="process.flowN>index?'tac bg colorb mgrt':'tac colorb mgrt'">{{index + 1}}</view>-->
<!--					<view class=" mgrt">{{item}}</view>-->
<!--					<image class="right" src="../../static/images/order/right.png" mode="" v-if="process.flowN - 1>index"></image>-->
<!--					<image class="right" src="../../static/images/order/right.png" mode="" v-if="process.flowN - 1==index&&process.isPass==1"></image>-->
<!--				</view>-->
<!--				<view class="fenge disp ">-->
<!--					<view class="fengeLine" v-if="index+1!=list.length">-->
<!--						<view class="line"></view>-->
<!--					</view>-->
<!--					<view class="mess fl1" v-if="process.flowN - 1==index&&process.isFail==2">-->
<!--						<view class="color disp aic">-->
<!--							<image class="warnner" src="../../static/images/order/warnner.png" mode=""></image>-->
<!--							<text>未通过</text>-->
<!--						</view>-->
<!--						<view class="">{{process.causeOfFailure}}</view>-->
<!--					</view>-->
<!--					<view class="mess fl1" v-if="process.flowN - 1==index&&process.isFail==0">-->
<!--						<view class="disp aic">-->
<!--							<image class="warnner" src="../../static/images/search/reviewing.png" mode=""></image>-->
<!--							<text class="reds">审核中</text>-->
<!--						</view>-->
<!--					</view>-->
<!--				</view>-->
<!--			</view>-->
<!--		</view>-->
	</view>
</template>

<script>
	import {getOrderProcess} from "../../api/order.js"
export default {
	data() {
		return {
			id:null,
      current: null,
			process:[],
			list:['完善资料','资产流动性测算','提交咨询','业务员处理','权证处理','资料审核','银行面签填贷款申请表','考察抵押物和经营场地','银行出批复','银行面签抵押合同和借款合同','办理抵押','办公证','成功']
		}
	},
	onLoad(option) {
		this.id = option.id
		this.getProcess()
	},
	methods: {
		//获取流程
		getProcess(){
			getOrderProcess({orderId:this.id}).then(res => {
				this.process = res.data[0]
        if (this.process.flowN==='13'){
          this.current = res.data[0].flowN
        }else {
          this.current = res.data[0].flowN-1
        }
        console.log(this.current)
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container{
	padding: 20rpx;
	.title{
		padding: 20rpx 0;
		margin-bottom: 50rpx;
	}
	.list{
		.listBar{
			.tac{
				width: 40rpx;
				line-height: 40rpx;
				border-radius: 50%;
				background-color: #ccc;
			}
			.bg{
				background-color: green;
				color: #fff;
			}
			.right{
				width: 35rpx;
				height: 35rpx;
				border-radius: 50%;
			}
			.fenge{
				padding: 10rpx 0;
				.fengeLine{
					width: 40rpx;
					min-height: 60rpx;
					.line{
						width: 1rpx;
						height: 100%;;
						margin: auto;
						background-color: #e7e7e7;
					}
				}
				.mess{
					padding: 20rpx;
					height: 100rpx;
					box-shadow: 0rpx 0rpx 7rpx 3rpx #ccc;
					.warnner{
						width: 35rpx;
						height: 35rpx;
						margin-right: 10rpx;
						border-radius: 50%;
					}
					.reds{
						color: #d4237a;
					}
				}
			}
		}
	}
}
</style>
